<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World </title>
</head>
<body>
<h1><%= "Hello World!" %>
</h1>
<br/>
<%--${pageContext.request.contextPath}/--%>
<img id="img_profile_picture"
     src="img/b.jfif" width="100px" height="100px"
     alt="头像" title="头像" /><br>

<form action="LoginServlet" method="post">
    <input id="input_username" type="text" name="username" placeholder="用户名"><br>
    <input type="password" name="password" placeholder="密码"><br>
    <input type="submit">

</form>
<p>${msg}</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(function () {   //ajax
        // console.log("初始化！");
        // //失去用户名文本框焦点时
        $("#input_username").blur(function () {
            getUserProfilePicture($(this).val());
        });
    });

    //获取用户头像
    function getUserProfilePicture(username) {
        $.ajax({
            url:"LoginServlet",
            type:"get",
            data:{"username":username},
            success:function (data){
                console.log(data);
                if( data != null) {
                    $("#img_profile_picture").attr("src","img/"+data);
                }
            }
        })

    }
</script>
</body>
</html>